﻿<!DOCTYPE html>
<html>
<head>
    <title>AspNetWithVueBinding </title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/vue.min.js"></script>
    <script src="Scripts/isRockFx.js"></script>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/utility.js"></script>
    <script>
        Vue.config.debug = true;        //vue debug mode
        Vue.config.devtools = true;     //vue debug mode
        var guid = getQueryString('guid');  //取得guid

        var vd_StudentRec= { StudentName: '', Height: 0, Weight: 0 }; //儲存資料的前端object
        var vm_StudentRec; //Vue instance

        //設定資料繫結
        function SetBinding() {
            //create vue instance
            vm_StudentRec = new Vue(
                        {
                            el: '#Form_StudentRec',
                            data: { rec: vd_StudentRec },
                        });
        }

        //新增一筆資料
        function AddNewOrUpdate() {
            var para = vd_StudentRec;

            ExecuteAPI('Example', 'AddNewOrUpdate', para,
                //success
                function (result) {
                    if (result.isSuccess)
                    {
                        window.location.href = 'index.html';
                    }
                }
             );
        }

        //透過binding清空UI上的資料
        function Clear() {
            vd_StudentRec = { StudentName: '', Height: 0, Weight: 0 };
            vm_StudentRec.rec = vd_StudentRec;
        }

        //依照QueryString guid 載入特定資料
        function LoadData(guid) {
            var para = guid;
            ExecuteAPI('Example', 'LoadData', para,
              //success
              function (result) {
                  if (result.isSuccess) {
                      vd_StudentRec = result.Data;
                      vm_StudentRec.rec = vd_StudentRec;
                  }
              }
           );
        }

        //ready
        $(function () {
            SetBinding();   //設定繫結

            //如果有QueryString則載入特定資料
            if (guid != null)
            {
                //依照QueryString guid 載入特定資料
                LoadData(guid); 
            }

            //Button Event Hook
            $('#ButtonAddNewOrUpdate').click(AddNewOrUpdate);
            $('#ButtonClear').click(Clear);
        });
    </script>
</head>
<body>
    <div class="row">
        <div class="col-md-12" style="margin: 10px">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    範例 : AspNetWithVueBinding (新增/更新)
                </div>
                <div class="panel-body">
                 <div class="form-group" id="Form_StudentRec">
                     <label>資料編號: <br />{{rec.guid}}</label><br />
                     <label>姓名:</label>
                     <input class="form-control"  id="txbName" v-model="rec.StudentName" placeholder="請輸入姓名" />
                     <label>身高:</label>
                     <input class="form-control" id="txbHeight" v-model="rec.Height" placeholder="請輸入身高" />
                     <label>體重:</label>
                     <input class="form-control" id="txbWeight" v-model="rec.Weight" placeholder="請輸入體重" />
                     <br />
                     <button type="button" id="ButtonAddNewOrUpdate" class="btn btn-primary">新增/更新</button>
                     <button type="button" id="ButtonClear" class="btn btn-primary">清空</button>
                 </div>
                </div>
                <br />
            </div>
        </div>
    </div>
</body>
</html>